<template>
  <div>
    <el-form-item label="是否显示查询" prop="noticeList.sfcx">
      <el-radio-group v-model="form.noticeList.sfcx" style="width: 180px">
        <el-radio
          v-for="item in this.dict.whether_type"
          :key="item.id"
          :label="item.value"
        >{{ item.label }}
        </el-radio>
      </el-radio-group>
    </el-form-item>
    <el-form-item
      label="显示条数"
      prop="noticeList.xsts"
    >
      <el-input-number v-model="form.noticeList.xsts" :min="1" style="width: 180px" />
    </el-form-item>
    <el-form-item label="数据来源" prop="noticeList.dataType">
      <el-radio-group v-model="form.noticeList.dataType" size="mini" style="width: 500px" @change="dataType">
        <el-radio-button label="1">数据库查询</el-radio-button>
        <el-radio-button label="2">API接口查询</el-radio-button>
      </el-radio-group>
    </el-form-item>
    <el-form-item v-show="form.noticeList.dataType.toString() == '1'" label="请选择数据源" prop="noticeList.dataSource">
      <el-select v-model="form.noticeList.dataSource" placeholder="请选择数据源">
        <el-option
          v-for="item in dataSources"
          :key="item.id"
          :label="item.name"
          :value="item.dataCode"
        />
      </el-select>
    </el-form-item>
    <el-form-item v-show="form.noticeList.dataType.toString() == '1'" label="查询sql" prop="noticeList.querySql">
      <el-input
        v-model="form.noticeList.querySql"
        type="textarea"
        :rows="2"
        placeholder="请以输入sql语句，注意sql请以where 1 = 1 结束 或者 where 1=1 and xxx 结束"
        style="width: 500px;"
      />
    </el-form-item>
    <el-form-item v-show="form.noticeList.dataType.toString() == '1'" label="查询详情sql" prop="noticeList.queryEntitySql">
      <el-input
        v-model="form.noticeList.queryEntitySql"
        type="textarea"
        :rows="2"
        placeholder="请以输入查询详情sql语句，注意sql请以where 1 = 1 结束 或者 where 1=1 and xxx 结束"
        style="width: 500px;"
      />
    </el-form-item>
    <el-form-item v-show="form.noticeList.dataType.toString() == '1'" label="更新访问次数" prop="noticeList.updateCountSql">
      <el-input
        v-model="form.noticeList.updateCountSql"
        type="textarea"
        :rows="2"
        placeholder="请以输入查询详情sql语句，注意sql请以where 1 = 1 结束 或者 where 1=1 and xxx 结束"
        style="width: 500px;"
      />
    </el-form-item>
    <el-form-item v-show="form.noticeList.dataType.toString() == '2'" label="api地址" prop="noticeList.apiUrl">
      <el-input v-model="form.noticeList.apiUrl" placeholder="请输入apiURL地址" style="width: 500px" />
    </el-form-item>
    <el-form-item v-show="form.noticeList.dataType.toString() == '2'" label="api页码字段" prop="noticeList.apiCurrentName">
      <el-input v-model="form.noticeList.apiCurrentName" placeholder="请输入页码参数名称" style="width: 180px" />
    </el-form-item>
    <el-form-item v-show="form.noticeList.dataType.toString() == '2'" label="api条数字段" prop="noticeList.apiRowsName">
      <el-input v-model="form.noticeList.apiRowsName" placeholder="请输入每页显示条数字段" style="width: 180px" />
    </el-form-item>
    <el-form-item v-show="form.noticeList.dataType.toString() == '2'" label="请求方式" prop="noticeList.requestMethod">
      <el-select v-model="form.noticeList.requestMethod" placeholder="请选择请求方式" style="width: 180px">
        <el-option
          v-for="item in dict.request_method"
          :key="item.id"
          :label="item.label"
          :value="item.value"
        />
      </el-select>
    </el-form-item>
    <el-form-item v-show="form.noticeList.dataType.toString() == '2'" label="数据类型" prop="noticeList.contentType">
      <el-select v-model="form.noticeList.contentType" placeholder="请选择请求类型" style="width: 180px">
        <el-option
          v-for="item in dict.content_type"
          :key="item.id"
          :label="item.label"
          :value="item.value"
        />
      </el-select>
    </el-form-item>
    <el-form-item
      label="显示字段及名称"
      prop="noticeList.columns"
    >
      <el-input
        v-model="form.noticeList.columns"
        type="textarea"
        :rows="2"
        placeholder="请以 [{'title':'标题名称','field':'字段名称'}] 的形式填写"
        style="width: 500px;"
      />
    </el-form-item>
    <el-form-item label="查询参数" prop="noticeList.blurryParameter">
      <el-input v-model="form.noticeList.blurryParameter" placeholder="模糊查询字段 （如果多个，请‘;’号分开）" style="width: 500px" />
    </el-form-item>
    <el-form-item label="优先级" prop="noticeList.orderType">
      <el-input v-model="form.noticeList.orderType" placeholder="排序字段及方式" style="width: 500px" />
    </el-form-item>
    <el-form-item label="权限类型" prop="noticeList.qxlx">
      <el-select v-model="form.noticeList.qxlx" placeholder="请选择模版">
        <el-option
          v-for="item in this.dict.dept_auth"
          :key="item.id"
          :label="item.label"
          :value="item.value"
        />
      </el-select>
    </el-form-item>
    <el-form-item label="关联权限字段" prop="noticeList.qxzd">
      <el-input v-model="form.noticeList.qxzd" style="width: 180px" />
    </el-form-item>
    <el-form-item label="是否定时任务" prop="noticeList.sfdsrw">
      <el-radio-group v-model="form.noticeList.sfdsrw" style="width: 180px">
        <el-radio
          v-for="item in this.dict.whether_type"
          :key="item.id"
          :label="item.value"
        >{{ item.label }}
        </el-radio>
      </el-radio-group>
    </el-form-item>
    <el-form-item
      label="间隔时间"
      prop="noticeList.jgsj"
    >
      <el-input-number v-model="form.noticeList.jgsj" placeholder="单位（秒）" :min="1" style="width: 180px" />
    </el-form-item>
    <el-form-item label="更多查询地址" prop="noticeList.moreUrl">
      <el-input v-model="form.noticeList.moreUrl" placeholder="请输入查询更多地址" style="width: 500px" />
    </el-form-item>
    <el-form-item label="详情页打开方式" prop="noticeList.entityType">
      <el-radio-group v-model="form.noticeList.entityType" size="mini" style="width: 500px" @change="openEntity">
        <el-radio-button label="1">定制页面</el-radio-button>
        <el-radio-button label="2">业务系统</el-radio-button>
      </el-radio-group>
    </el-form-item>
    <el-form-item
      v-show="form.noticeList.entityType.toString() == '1'"
      label="详情页对应字段"
      prop="noticeList.entityColumn"
    >
      <el-input
        v-model="form.noticeList.entityColumn"
        type="textarea"
        :rows="2"
        placeholder="请以 {'title':'标题字段','content':'内容字段',
        'pubTime':'发布时间','pubUser':'发布人','organization':'部门','visits':'访问量'} 的形式填写"
        style="width: 500px;"
      />
    </el-form-item>
    <el-form-item label="详情页面地址" prop="noticeList.openEntityUrl">
      <el-input v-model="form.noticeList.openEntityUrl" placeholder="参数请使用{item}代替" style="width: 500px" />
    </el-form-item>
    <el-form-item label="详情页地址参数" prop="noticeList.primaryKey">
      <el-input
        v-model="form.noticeList.primaryKey"
        placeholder="多个参数使用‘;’号隔开，参数位置严格按照详情页地址从左往右填写"
        style="width: 500px"
      />
    </el-form-item>
  </div>
</template>

<script>
import noticeList from '@/api/system/noticeList';
import crudDataSource from '@/api/system/dataSource';
export default {
  name: 'ComponentNoticeList',
  props: {
    form: {
      type: Object,
      require: true
    }
  },
  dicts: ['whether_type', 'dept_auth', 'content_type', 'request_method'],
  data() {
    return {
      dataSources: [],
      rules: {
        columnName: [
          { required: true, message: '请输入栏目名称', trigger: 'blur' }
        ],
        icon: [
          { required: true, message: '栏目图标不能为空', trigger: 'blur' }
        ],
        noticeList: {
          rows: [
            { required: true, message: '显示条数不能为空', trigger: 'blur' }
          ],
          qxlx: [
            { required: true, message: '权限类型不能为空', trigger: 'change' }
          ],
          columns: [
            { required: true, message: '显示内容信息不能为空！', trigger: 'blur' }
          ],
          dataType: [
            { required: true, message: '请选择数据来源', trigger: 'change' }
          ],
          entityType: [
            { required: true, message: '请选择详情页打开方式', trigger: 'change' }
          ]
        }
      }
    };
  },
  mounted() {
    const id = this.form.id;
    if (id != null) {
      noticeList.getEntity(id).then(res => {
        this.form.noticeList = res;
        this.form.noticeList.sfdsrw = this.form.noticeList.sfdsrw.toString();
        this.form.noticeList.sfcx = this.form.noticeList.sfcx.toString();
      }).catch(() => {
        this.$message.error('未查询到模版信息');
      });
    }
    crudDataSource.queryEnable().then(res => {
      this.dataSources = res;
    }).catch(() => {
      console.log('查询数据源信息失败！');
    });
  },
  methods: {

    dataType(events) {
      if (events === 1) {
        this.rules.noticeList.apiUrl = [];
        this.rules.noticeList.querySql = [{ required: true, message: '请输入sql语句', trigger: 'blur' }];
        this.rules.noticeList.dataSource = [{ required: true, message: '请选择数据源', trigger: 'change' }];
      } else {
        this.rules.noticeList.apiUrl = [{ required: true, message: '请输入api地址', trigger: 'blur' }];
        this.rules.noticeList.querySql = [];
        this.rules.noticeList.dataSource = [];
      }
      this.$emit('getRules', this.rules);
    },
    openEntity(events) {
      if (events === 1) {
        this.rules.noticeList.entityColumn = [{ required: true, message: '详情页显示字段描述不能为空', trigger: 'blur' }];
      } else {
        this.rules.noticeList.entityColumn = [];
      }
      this.$emit('getRules', this.rules);
    }
  }
};
</script>

<style scoped>

</style>
